<template>
  <div class="adminList">
    <el-row>
      <!-- 删除功能 -->
      <el-col :span="2" :offset="1">
        <el-button type="danger" size="small" :disabled="delAll" @click="centerDialogVisible = true">批量删除</el-button>
      </el-col>
      <el-col :span="1">
        <el-checkbox v-model="checkedAll" @change="handleAllChange">全选</el-checkbox>
      </el-col>
      <!-- 刷新功能 -->
      <el-col :span="1" :offset="6">
        <i class="el-icon-refresh-right active" @click="handleLoad"></i>
      </el-col>
      <!-- 搜索功能 -->
      <el-col :span="6" :offset="0">
        <el-input placeholder="搜索用户名" prefix-icon="el-icon-search" v-model="adminSearch" size="small">
          <template slot="append">
            <span class="kw">关键字</span>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <div style="margin:30px 0"></div>
    <!-- 列表 -->
    <el-table :data="tableData" height="450" border style="width: 90%;margin-left:50px;max-width:1200px"
      v-if="dataList.length">
      <el-table-column label="选择" width="100px">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.checkedItem" @change="handleChangeItem">选择</el-checkbox>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="日期">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime | format}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="姓名">
      </el-table-column>
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <img :src="$urlBase + scope.row.avatar" alt="" width="50px" height="50px">
        </template>
      </el-table-column>
      <el-table-column label="标签" width="150px">
        <template>
          <el-tag>普通管理员</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <el-popconfirm title="确定删除这个管理员吗？" icon-color="red"
            @confirm="handleDelete(scope.$index, scope.row._id,scope.row.avatar)">
            <el-button size="mini" type="danger" slot="reference">
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-empty :image-size="200" v-else></el-empty>
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
      <span>删错了就找不回来了确定要删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelBatch">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data () {
    return {
      adminSearch: '',
      delAll: true,
      dataList: [],
      checkedAll: false,
      centerDialogVisible: false
    }
  },
  filters: {
    //  加载时间
    format (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  mounted () {
    this.$axios.get('/user/userAll').then(res => {
      this.dataList = res.data.info
    })
  },
  computed: {
    tableData () {
      // 搜索关键字
      return this.dataList.filter(item => item.username.includes(this.adminSearch))
    }
  },
  methods: {
    // 点击全选
    handleAllChange (state) {
      this.dataList.forEach(item => {
        this.$set(item, 'checkedItem', state)
      })
      // 多个删除按钮禁用
      this.delAll = !this.dataList.filter(item => item.checkedItem).length
    },
    // 删除对应列
    handleDelete (index, id, filename) {
      //  把选中的隐藏掉
      this.handleAllChange(false)
      // 获取到对应数据截取了就行
      this.$axios.delete(`/user/${id}/${localStorage.getItem('token')}/${filename.split('/')[1]}`).then(res => {
        if (res.data.ok) {
          this.dataList.splice(index, 1)
          this.$message({
            message: res.data.info,
            type: 'success'
          })
        } else {
          this.$message.error(res.data.info)
        }
      })
    },
    handleLoad () {
      location.reload()
    },
    handleChangeItem () {
      // 多个删除按钮禁用
      this.delAll = !this.dataList.filter(item => item.checkedItem).length
      // 改变全选
      this.checkedAll = (this.dataList.length === this.dataList.filter(item => item.checkedItem).length)
    },
    // 批量删除
    handleDelBatch () {
      // 把那个提示框隐藏了
      this.centerDialogVisible = false
      const data = this.dataList.filter(item => item.checkedItem).map(item => item._id)
      const filenames = this.dataList.filter(item => item.checkedItem).map(item => item.avatar.split('/')[1])
      this.$axios.post('/user/delBatch', {
        delBatchItem: data,
        filenames,
        token: localStorage.getItem('token')
      }).then(res => {
        // 前端写好了
        if (res.data.ok) {
          //  把选中的隐藏掉
          // 刷新一下列表
          this.handleLoad()
          this.$message({
            message: res.data.info,
            type: 'success'
          })
        } else {
          this.$message.error(res.data.info)
        }
      })
    }
  }
}
</script>
<style>
.el-input-group__append {
  position: relative;
  width: 60px;
}
</style>
<style lang="scss" scoped>
.titleHeader {
  margin-bottom: 20px;
}
.el-row {
  height: 30px;
  line-height: 32px;
}
.adminList {
  min-width: 1000px;
}
.kw {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #409eff;
  color: #fff;
  justify-content: center;
  align-items: center;
}
.el-icon-refresh-right {
  cursor: pointer;
  transition: all 0.3s;
}
.active:hover {
  transform: rotate(360deg);
}
</style>
